<template>
  <div>
    <div class="i_bg">
      <div class="content mar_20">
        <img src="@/assets/images/img1.jpg" />
      </div>

      <!--Begin 第一步：查看购物车 Begin -->
      <div class="content mar_20">
        <table border="0" class="car_tab" style="width:1200px; margin-bottom:50px;" cellspacing="0" cellpadding="0"
          v-if="pageInfo.list.length > 0 && pageInfo.list != null">
          <tr>
            <td class="car_th" width="490">商品名称</td>
            <td class="car_th" width="140">属性</td>
            <td class="car_th" width="150">购买数量</td>
            <td class="car_th" width="130">小计</td>
            <td class="car_th" width="150">操作</td>
          </tr>
          <tr v-for="buyCar in pageInfo.list" :key="buyCar.id">
            <td>
              <div class="c_s_img"><img :src="'http://192.168.144.183:9090/easybuyImages/' + buyCar.product.fileName"
                  width="73" height="73" /></div>
              {{ buyCar.product.name }}
            </td>
            <td align="center">颜色：灰色</td>
            <td align="center">
              <div class="c_num">
                <input type="button" value="" @click="loseNumber(buyCar.id, buyCar.number, buyCar.product.stock)"
                  class="car_btn_1" />
                <input type="number" v-model="buyCar.number" name="" class="car_ipt" @change="updataNumber(buyCar)" />
                <input type="button" value="" @click="addNumber(buyCar.id, buyCar.number, buyCar.product.stock)"
                  class="car_btn_2" />
              </div>
            </td>
            <td align="center" style="color:#ff4e00;">￥{{ (buyCar.product.price * buyCar.number).toFixed(2) }}</td>

            <td align="center"><a @click.prevent="delBuyCar(buyCar.id)">删除</a>&nbsp; &nbsp;<a href="#">加入收藏</a></td>
          </tr>

          <tr style="height: 20px;">
            <td colspan="5">
              <span class="pagination">
                <span>
                  <span>共{{ pageInfo.total }}条数据</span>&nbsp;&nbsp;
                  <span>第{{ pageInfo.pageNum }}/{{ pageInfo.pages }}页</span>&nbsp;&nbsp;
                </span>
                <span>
                  <a href="#" @click.prevent="getPage('home')">首页</a>&nbsp;&nbsp;
                  <a href="#" @click.prevent="getPage('last')">上一页</a>&nbsp;&nbsp;
                  <a href="#" @click.prevent="getPage('next')">下一页</a>&nbsp;&nbsp;
                  <a href="#" @click.prevent="getPage('end')">末页</a>
                </span>
              </span>
            </td>
          </tr>

          <tr height="70">
            <td colspan="6" style="font-family:'Microsoft YaHei'; border-bottom:0;">
              <label class="r_rad"><input type="checkbox" name="clear" v-model="isCheck"
                  @change="deleteAll()" /></label><label class="r_txt">清空购物车</label>
              <span class="fr">商品总价：<b style="font-size:22px; color:#ff4e00;">￥{{ getTotalPrice() }}</b></span>
            </td>
          </tr>
          <tr valign="top" height="150">
            <td colspan="6" align="right">
              <a href="#" @click.prevent="toIndex()"><img src="@/assets/images/buy1.gif" /></a>&nbsp; &nbsp;
              <a href="#" @click.prevent="toBuyCarTwo()"><img src="@/assets/images/buy2.gif" /></a>
            </td>
          </tr>
        </table>
        <div v-if="pageInfo.list.length == 0 || pageInfo.list == null"
          style="width: 99%;height: 400px; border: 2px solid orange">
          <div style="text-align: center; font-size: 24px; line-height: 400px; ">空空如也。。。<a style="color: orange;"
              @click.prevent="toIndex()">去添加喜欢的商品吧！</a></div>
        </div>
      </div>


      <!--End 第一步：查看购物车 End-->


      <!--Begin 弹出层-删除商品 Begin-->
      <!-- <div id="fade" class="black_overlay"></div>
      <div id="MyDiv" class="white_content">
        <div class="white_d">
          <div class="notice_t">
            <span class="fr" style="margin-top:10px; cursor:pointer;" onclick="CloseDiv('MyDiv','fade')"><img
                src="images/close.gif" /></span>
          </div>
          <div class="notice_c">

            <table border="0" align="center" style="font-size:16px;" cellspacing="0" cellpadding="0">
              <tr valign="top">
                <td>您确定要把该商品移除购物车吗？</td>
              </tr>
              <tr height="50" valign="bottom">
                <td><a href="#" class="b_sure">确定</a><a href="#" class="b_buy">取消</a></td>
              </tr>
            </table>
          </div>
        </div>
      </div> -->
    </div>

  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'BuyCarView',
  data() {
    return {
      userId: '',
      pageInfo: '',
      buyCarList: [],
      buyCar: '',
      number: '',
      totalPrice: 0,
      isCheck: false
    }
  },
  methods: {
    ...mapMutations(['setShowPage']),
    toIndex() {
      this.$router.push('/')
    },
    toBuyCarTwo() {
      this.$router.push('/buycarTwo')
    },
    getAllBuyCar(pageNum, pageSize) {
      this.$axios({
        url: 'selectBuyCarByPage',
        method: 'post',
        data: {
          pageNum: pageNum,
          pageSize: pageSize,
          userId: this.userId
        },
        headers: {
          'content-type': 'application/json'
        }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == '5200') {
          this.pageInfo = rs.data.pageInfo
          console.log(this.pageInfo)
        }
      })
    },
    delBuyCar(id) {
      if (confirm('是否删除？')) {
        this.$axios({
          url: 'deleteBuyCar',
          method: 'get',
          params: { id: id }
        }).then(rs => {
          if (rs.data.code == 5200 || rs.data.code == '5200') {
            alert('删除成功！')
            this.getAllBuyCar(1, 5)
            this.getBuyCars()
          } else {
            alert('删除失败！')
          }
        })
      }
    },
    addNumber(id, number, stork) {

      if (number + 1 > stork) {
        alert('库存不足！')
        return
      }

      this.$axios({
        url: 'updateBuyCar',
        method: 'post',
        data: {
          id: id,
          number: number + 1
        },
        header: {
          'content-type': 'application/json'
        }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == '5200') {
          this.getAllBuyCar(1, 5)
          this.getBuyCars()
        } else {
          alert('数据异常！')
        }
      })
    },
    updataNumber(buyCar) {
      console.log(buyCar.number)
      console.log(buyCar)

      if (buyCar.number == 0 || buyCar.number == '0') {
        this.getAllBuyCar(1, 5)
        this.getBuyCars()
        return
      }

      const number = Number(buyCar.number)
      if (!Number.isInteger(number)) {
        alert('请输入整数！')
        this.getAllBuyCar(1, 5)
        this.getBuyCars()
        return
      }
      if (buyCar.number > buyCar.product.stock) {
        alert('库存不足！')
        this.getAllBuyCar(1, 5)
        this.getBuyCars()
        return
      }
      this.$axios({
        url: 'updateBuyCar',
        method: 'post',
        data: {
          id: buyCar.id,
          number: buyCar.number
        },
        header: {
          'content-type': 'application/json'
        }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == '5200') {
          this.getAllBuyCar(1, 5)
          this.getBuyCars()
        } else {
          alert('数据异常！')
        }
      })
    },
    loseNumber(id, number, stock) {
      if (number - 1 == 0) {
        alert('至少选择一件！')
        return
      }
      if (number - 1 > stock) {
        alert('库存不足！')
        return
      }
      this.$axios({
        url: 'updateBuyCar',
        method: 'post',
        data: {
          id: id,
          number: number - 1
        },
        header: {
          'content-type': 'application/json'
        }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == '5200') {
          this.getAllBuyCar(1, 5)
          this.getBuyCars()
        } else {
          alert('数据异常！')
        }
      })
    },
    getTotalPrice() {
      this.totalPrice = 0;
      for (let buyCar of this.buyCarList) {
        let count = buyCar.number * buyCar.product.price
        this.totalPrice = this.totalPrice + count
      }
      return this.totalPrice.toFixed(2)
    },
    deleteAll() {
      if (this, this.isCheck == true) {
        if (confirm('是否全部删除？')) {
          this.$axios({
            url: 'deleteBuyCarByUserId',
            method: 'get',
            params: { userId: this.userId }
          }).then(rs => {
            if (rs.data.code == 5200 || rs.data.code == '5200') {
              alert("删除成功！")
              this.getAllBuyCar(1, 5)
              this.getBuyCars()
            } else {
              alert('删除失败！')
            }
          })
        } else {
          this.isCheck = false
        }
      }
    },
    getPage(opr) {
      let pageNum = 1
      switch (opr) {
        case 'last':
          pageNum = this.pageInfo.prePage === 0 ? 1 : this.pageInfo.prePage
          break
        case 'next':
          pageNum = this.pageInfo.nextPage === 0 ? this.pageInfo.pages : this.pageInfo.nextPage
          break
        case 'end':
          pageNum = this.pageInfo.pages
          break
      }
      this.getAllBuyCar(pageNum, 5)
      this.getBuyCars()
    },
    getBuyCars() {
      this.$axios({
        url: 'selectAllBuyCar',
        params: {
          userId: this.userId
        }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == '5200') {
          this.buyCarList = rs.data.allBuyCar
        }
      })
    }
  },
  mounted() {
    this.userId = window.sessionStorage.getItem('userId')
    console.log(this.userId)
    this.getAllBuyCar(1, 5)
    this.getBuyCars()
    this.setShowPage(0)
  }
}
</script>
<style scoped>
.pagination {
  text-align: center;
  display: block;
}
</style>
